<template>
	<!-- pages/user/exchange/index/index.wxml -->
  <view>
    <navbar></navbar>
    <view v-if="!loading" class="container">
      <view class="header">
        <view class="underline-title-wrapper">
          <view class="underline-title">我的兑换码</view>
        </view>
        <block v-if="0 < code.list.length">
          <view class="code-list">
            <exchange-code :info="item" v-for="(item, index) in code.displayList" :key="item.code">
            </exchange-code>
          </view>
          <view v-if="code.visibleCount < code.list.length"
                :class="'btn-show-all-code ' + (code.displayAll ? 'open' : '') + ' dis-flex flex-x-center flex-y-center'"
                @tap.stop.prevent="onShowAllCodeBtnTaped">
            <text class="dy-iconfont icon-xiala-"></text>
            <text v-if="!code.displayAll">已折叠剩下的{{ code.list.length - code.displayList.length }}个兑换码</text>
            <text v-else>收起兑换码</text>
          </view>
        </block>
        <view v-else class="yoshop-notcont">
          <text class="iconfont icon-wushuju"></text>
          <text class="cont">暂无可用兑换码</text>
        </view>
        <view class="exchange-goods">
          <!-- <view class="underline-title-wrapper">
            <view class="underline-title">兑换区域</view>
          </view> -->
          <form @submit="exchangeGoods">
            <view class="input-box dis-flex">
              <input class="flex-box code-input" type="text" name="code" placeholder="请粘贴兑换码"
                     v-model="inputCode" />
              <button class="btn-normal btn-exchange" form-type="submit">立即兑换</button>
            </view>
          </form>
          <view class="exchange-tips m-top30 col-9 f-26">＊严禁兑换码场外交易，请不要向陌生人购买兑换码，谨防诈骗和恶意炒作</view>
        </view>
      </view>
      <view class="goods-list">
        <navigator
            :url="'../checkout/checkout?code=' + item.code + '&goods_id=' + item.goods_id + '&real_goods_id=' + item.real_goods_id"
            hover-class="none" class="goods dis-flex flex-y-center" v-for="(item, index) in goodsList"
            :key="item.goods_id">
          <view class="goods__img-wrapper flex-fixed">
            <image class="goods__img" :src="item.file_url" mode="aspectFill"></image>
          </view>

          <view class="goods-info flex-box">
            <view class="goods__title twolist-hidden col-3 f-28">{{ item.goods_name }}</view>
            <view v-if="3 == item.goods_type">
              <text class="undigit">非数字藏品</text>
            </view>
            <view class="goods-author dis-flex flex-x-between flex-y-center">
              <view class="publisher__name">
                <text class="dy-iconfont icon-user"></text>
                <text class="f-24 col-9" decode>&nbsp;{{ item.pub_name }}</text>
              </view>
              <view class="btn-exchange">兑换</view>
            </view>
          </view>
        </navigator>
      </view>
      <bottom-safe-area></bottom-safe-area>
    </view>
  </view>
</template>

<script>
  import navbar from "@/components/navbar/navbar";
	import exchangeCode from '@/components/exchange-code/index';
	import bottomSafeArea from '@/components/bottom-safe-area/index';
	// pages/user/exchange/index/index.js
	const app = getApp();
	export default {
		components: {
      navbar,
			exchangeCode,
			bottomSafeArea
		},
		data() {
			return {
				loading: true,
				code: {
					list: [],
					// 所有的兑换码
					displayList: [],
					// 显示的兑换码
					displayAll: false,
					// 显示全部兑换码
					visibleCount: 2 // 默认显示几个兑换码
				},
				inputCode: '',
				goodsList: []
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.setData({
				inputCode: '',
				goodsList: []
			});
			this.requestData();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		methods: {
			//////// networking ////////
			requestData: function(e) {
				app._get(
					'user.code/lists', {},
					(res) => {
						let list = [];

						if (1 == res.code) {
							list = res.data.list || [];
						}

						this.setData({
							'code.list': list
						});
						this.setupCodeList();
					},
					null,
					() => {
						this.setData({
							loading: false
						});
					}
				);
			},

			//////// private methods ////////
			setupCodeList: function(e) {
				let displayList = null;
				let list = this.code.list;
				if (this.code.visibleCount < list.length && !this.code.displayAll) {
					displayList = list.slice(0, this.code.visibleCount);
				} else {
					displayList = list;
				}

				this.setData({
					'code.displayList': displayList
				});
			},

			//////// tap methods ///////
			// 点击更多兑换码
			onShowAllCodeBtnTaped: function() {
				this.setData({
					'code.displayAll': !this.code.displayAll
				});
				this.setupCodeList();
			},

			exchangeGoods: function(e) {
				// App.showError('兑换活动暂未开始！');
				let {
					value
				} = e.detail;

				if (0 == value.code.length) {
					app.showError('兑换码不能为空！');
				} else {
					uni.showLoading();

					app._post_form(
						'user.code/choose_item', {
							code: value.code
						},
						(res) => {
							if (1 == res.code) {
								this.setData({
									goodsList: res.data
								});
							}
						},
						null,
						() => {
							uni.hideLoading();
						}
					);
				}
			}
		}
	};
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	/* pages/user/exchange/index/index.wxss */
	.header {
		padding: 0 30rpx;
	}

	.underline-title-wrapper {
		padding-top: 40rpx;
	}

	.underline-title {
		display: inline-block;
		font-size: 32rpx;
		font-weight: bold;
		color: #444444;
		position: relative;
	}

	.underline-title:after {
		content: '';
		width: 100%;
		height: 4rpx;
		background: $uni-bg-color-main-linear;
		position: absolute;
		bottom: 6rpx;
		left: 0;
		z-index: -1;
	}

	.btn-all-code {
		height: 80rpx;
	}

	.exchange-goods {
		margin-top: 20rpx;
	}

	.exchange-goods .input-box {
		height: 82rpx;
		background: #f9f9f9;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.exchange-goods .btn-exchange {
		width: 200rpx;
		background: $uni-bg-color-main;
		border-radius: 0px 20rpx 20rpx 0px;
		font-size: 26rpx;
		color: #ffffff;
		text-align: center;
		line-height: 82rpx;
	}

	.exchange-goods .btn-exchange[disabled] {
		background: $uni-text-color-main !important;
		color: #ffffff !important;
		opacity: 0.5;
	}

	.code-input {
		height: 100%;
		padding: 0 30rpx;
		font-size: 26rpx;
	}

	.input-placeholder {
		color: #ccc;
	}

	.exchange-tips {
		line-height: 40rpx;
	}

	.btn-show-all-code {
		height: 100rpx;
	}

	.btn-show-all-code text {
		color: $uni-text-color-grey;
		font-size: 28rpx;
	}

	.btn-show-all-code .dy-iconfont {
		margin-right: 10rpx;
		font-size: 36rpx;
		transition: all 0.3s;
	}

	.btn-show-all-code.open .dy-iconfont {
		transform: rotate(180deg);
	}

	.goods-list {
		padding: 0 30rpx;
	}

	.goods {
		height: 260rpx;
		background: $uni-bg-color-grey;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.goods .goods__img-wrapper {
		width: 220rpx;
		height: 220rpx;
	}

	.goods .goods__img {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.goods .goods-info {
		height: 100%;
		margin-left: 10rpx;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		position: relative;
	}

	.goods .goods__title {
		font-size: 32rpx;
		color: #101010;
	}

	.goods .btn-exchange {
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1px solid #e1c278;
		text-align: center;
		font-size: 28rpx;
		color: #e1c278;
		line-height: calc(60rpx - 2px);
	}

	.goods .publisher__name .icon-user {
		font-size: 24rpx;
		color: #e5e5e5;
	}

	.goods .goods-author {
		width: 100%;
		position: absolute;
		left: 10rpx;
		bottom: 20rpx;
	}
</style>
